<template>
  <div>
    <h2 class="section-title">客户见证</h2>

  <section class="floating-wall" :style="{ backgroundImage: `url(${bgImage})` }">
    <div
      v-for="(item, i) in testimonials"
      :key="i"
      class="bubble"
      :style="bubbleStyle(i)"
    >
      <img src="/default_avatar.jpg" class="avatar" alt="avatar" />
      <p class="quote">"{{ item.quote }}"</p>
    </div>
  </section>
  </div>
</template>

<script setup>
const bgImage = '/bg.jpg' // 可替换为任意温馨背景图路径

const testimonials = [
  { quote: '喝的是咖啡，暖的是心。' },
  { quote: '服务人员记住了我的名字，好感满满！' },
  { quote: '环保回收计划真的很棒。' },
  { quote: '每次新品都想尝一口，不怕踩雷。' },
  { quote: '我和朋友的默契之地，就是这家店。' },
  { quote: '日常上班前的灵魂加油站。' },
  { quote: '这里的香气，是我安心的起点。' },
  { quote: '每杯咖啡都像有温度的对话。' }
]

function bubbleStyle(i) {
  const top = 15 + Math.random() * 60
  const left = 6 + Math.random() * 80
  const delay = (i % 7) * 2
  const scale = 0.95 + Math.random() * 0.2
  return {
    top: `${top}%`,
    left: `${left}%`,
    animationDelay: `${delay}s`,
    transform: `scale(${scale})`,
    zIndex: 2 + (i % 3)
  }
}
</script>

<style scoped>
.section-title {
  font-size: 32px;
  font-weight: 600;
  color: #4a2e18;
  letter-spacing: 1px;
  margin-bottom: 32px;
  position: relative;
  z-index: 3; /* 高于遮罩和背景图 */
  text-align: center;
  overflow: hidden;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #c19a6b, #ffb46a);
  border-radius: 2px;
  opacity: 0.8;
}

.floating-wall {
  position: relative;
  height: 400px;
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 8%;
}

/* 遮罩层 */
.floating-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(2px);
  z-index: 1;
}

/* 漂浮语录泡泡 */
.bubble {
  position: absolute;
  max-width: 240px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(3px);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: floatSoft 16s linear infinite;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  z-index: 2;
}
.bubble:hover {
  transform: scale(1.07);
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.quote {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
}

/* 浮动动画 */
@keyframes floatSoft {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    transform: translateY(-80px);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 移动端处理 */
@media (max-width: 768px) {
  .floating-wall {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bubble {
    position: static;
    animation: none;
    margin-bottom: 16px;
  }
}
</style>
